<template>
  <div class="validate-combination-wrap">
    <el-input
      class="valid-code-input"
      v-model="validCode"
      @change="handleChange"
      @keyup.enter="handleEnter"
    ></el-input>
    <common-validate-code ref="validateRef" class="valid-img"></common-validate-code>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import CommonValidateCode from './validate-code.vue'
import { UPDATE_MODEL_EVENT, ENTER_KEY } from '@/utils/constants/events'

const props = defineProps({
  modelValue: {
    type: String,
  },
})
const validCode = ref(props.modelValue)
const validateRef = ref(null)
const emit = defineEmits({
  [UPDATE_MODEL_EVENT]: () => {},
  [ENTER_KEY]: () => {},
})

function handleChange(val) {
  emit(UPDATE_MODEL_EVENT, val)
}

function handleEnter() {
  emit(ENTER_KEY)
}
</script>
<style lang="less">
.validate-combination-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .valid-code-input {
    flex: 1;
    width: 100%;

    &.el-input--small .el-input__wrapper .el-input__inner {
      height: 48px;
      font-size: 24px;
    }
  }

  .valid-img {
    margin-left: 10px;
    width: 100px;
    height: 50px;
    flex-shrink: 0;
  }
}
</style>
